import { ITouchEvent, View } from "@tarojs/components";
import { cva } from "class-variance-authority";
import { ReactNode } from "react";
import { twMerge } from "tailwind-merge";

/**
 * 组件主体样式
 */
const vars = cva(
  "py-0 inline-flex items-center justify-cennter leading-none leading-[1]",
  {
    variants: {
      //
      type: {
        error: "type-error",
        warning: "type-warning",
        primary: "type-primary",
        success: "type-success",
        info: "type-info",
        dark: "type-dark",
      },

      //
      variant: {
        outline:
          "border border-solid border-[var(--type-color)] text-[var(--type-color)]",
        dashed:
          "border border-solid border-dashed border-[var(--type-color)] text-[var(--type-color)]",
        solid: "bg-[var(--type-color)] text-white",
        filled: "bg-[var(--type-color-bg)] text-[var(--type-color)]",
        text: "",
        link: "",
      },

      size: {
        small: "h-[44px] text-xs px-2",
        default: "h-[50rpx] px-2 text-sm",
        large: "h-[80rpx] text-lg px-4",
      },

      rounded: {
        true: "rounded-full",
        false: "rounded-md",
      },
    },
  }
);

export type ByTagProps = {
  block?: boolean;

  // color?: string;
  fontSize?: string;
  colorStyle?: string;
  rounded?: boolean;

  variant?: "outline" | "solid" | "dashed" | "filled";
  type?: "primary" | "error" | "info" | "success" | "warning" | "dark";
  size?: "small" | "default" | "large";

  icon?: string;
  iconColor?: string;

  iconSize?: number;
  openType?: string;

  className?: string;
  children?: ReactNode;
};

type ByTagEvents = {
  onClick?: (event: ITouchEvent) => void;
};

export default ({
  variant = "solid",
  size = "default",
  type = "primary",
  rounded = true,
  className,
  children,

  onClick,
}: ByTagProps & ByTagEvents) => {
  return (
    <View
      className={twMerge(vars({ type, size, variant, rounded }), className)}
      onClick={onClick}
    >
      {children}
    </View>
  );
};
